<template>
  <div class="personList" :style="{ background: `url(${imgbgc})`, 'background-size': '100% 100%' }">
    <div class="innerBox">
      <!--  v-show="this.type=='look'" -->
      <el-page-header @back="goBack">
        <template #title>
          <span>返回</span>
        </template>
        <template #content>
          <div class="personinfo">
            <span>{{person.name}}</span>
            <span>{{person.birthday}}</span>
            <span>{{person.phone}}</span>
          </div>
        </template>
      </el-page-header>
      <div class="topBox">
        <div class="left">
        </div>
        <div class="right">
          <el-button type="primary" @click="addTestFn">新增测验</el-button>
        </div>
      </div>
      <div class="listBox">
        <el-scrollbar>
          <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column label="序号" width="60" align='center'>
              <template #default="scope">
                <span>{{scope.$index + 1}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="testTime" label="测试日期" width="180"  align='center' />
            <el-table-column label="分测验名称" align='center'>
              <template #default="scope">
                <span>{{scope.row.whichQuestion=='1'? '双人关系测验':(scope.row.whichQuestion=='2'? '家庭或团体测验':'社会情境测验')}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="extra2" label="分测验对象"  align='center' />
            <el-table-column label="操作" align='center' width="240">
              <template #default="scope">
                <el-button @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button @click="handleLook(scope.$index, scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-scrollbar>
      </div>
      <!-- <div class="pageBox">
        <el-pagination
          background
          :hide-on-single-page="true"
          layout="prev, pager, next"
          :total="total"
          prev-text="上一页"
          next-text="下一页"
          :page-size="pageSize"
          :current-page="pageNum"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div> -->
    </div>
  </div>
</template>

<script>
import { seckGetPsychReport } from '@/api/home.js'
export default {
  data() {
    return {
      imgbgc: require('../assets/images/pbgc.jpg'),
      personType: 'adult',
      searchValue: '',
      tableData: [],
      total: 30,
      pageNum: 1,
      pageSize: 10,
      person: {
        name: sessionStorage.getItem('name'),
        birthday: sessionStorage.getItem('birthday'),
        phone: sessionStorage.getItem('phone')
      },
      type: '',
      WAIMS_TOKEN: ''
    }
  },
  mounted() {
    this.person.name = sessionStorage.getItem('name')
    this.person.birthday = sessionStorage.getItem('birthday')
    this.person.phone = sessionStorage.getItem('phone')
    if(localStorage.getItem('WAIMS_TOKEN') && localStorage.getItem('WAIMS_TOKEN') !== '') {
      this.WAIMS_TOKEN = localStorage.getItem('WAIMS_TOKEN')
      this.type = this.$route.query.type ? this.$route.query.type : ''
      this.geListFn()
    } else {
      // 清除localStorage 跳出网站
      // 清除与登录信息相关的local storage
      localStorage.removeItem("isLogin");
      localStorage.removeItem("baseInfo");
      localStorage.removeItem("proInfo");
      localStorage.removeItem("proUserFile");
      localStorage.removeItem("generalUserInfo");
      localStorage.removeItem("testId");
      // 清除session storage
      sessionStorage.clear();
      // 删除保存在cookie里的token
      document.cookie = "WAIMS_TOKEN" + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
      if(window.location.href.indexOf('https://xn--15t241ax9eqv8a.xn--fiqs8s/psych') > -1 ) {
        window.location.href = "https://xn--15t241ax9eqv8a.xn--fiqs8s/"
      } else if (window.location.href.indexOf('https://psychological-assessment.com/psych') > -1 ) {
        // 测试环境
        window.location.href = 'https://psychological-assessment.com/'
      } else {
        // 正式环境
        window.location.href = 'https://psychometrics-home.com/'
      }
    }
    this.personType = sessionStorage.getItem('personType')
    if(this.personType == 'adult') {
      this.imgbgc = require('../assets/images/pbgc.jpg')
    } else {
      this.imgbgc = require('../assets/images/cbgc.jpg')
    }
  },
  methods: {
    goBack() {
      this.$router.push({
        path: '/testList'
      })
    },
    addTestFn() {
      this.$router.push({
        path: '/selection4adult'
      })
    },
    handleEdit(index,row) {
      console.log(index,row)
      if(row.versionFlag == false) {
        // 跳转旧版
        this.$router.push({
          path: row.whichQuestion === '1' ? '/doubleTextListOld' : (row.whichQuestion === '2' ? '/familyTextListOld' : '/societyTextListOld'),
          query: {
            type: 'edit',
            recordId: row.id,
            itemname: row.extra2,
            testTime: row.testTime,
            questionArr: row.result
          }
        })
      } else {
        // 跳转新版
        this.$router.push({
          path: row.whichQuestion === '1' ? '/doubleTextList' : (row.whichQuestion === '2' ? '/familyTextList' : '/societyTextList'),
          query: {
            type: 'edit',
            recordId: row.id,
            itemname: row.extra2,
            testTime: row.testTime,
            questionArr: row.result
          }
        })
      }
      
    },
    handleLook(index, row) {
      if(row.versionFlag == false) {
        this.$router.push({ 
          path: '/reportOld',
          query: {
            recordId: row.id,
            whichQuestion: row.whichQuestion,
            testTime: row.testTime,
            itemname: row.extra2,
            testedId: sessionStorage.getItem('testedId')
          }
        })
      } else {
        this.$router.push({ 
          path: '/report',
          query: {
            recordId: row.id,
            whichQuestion: row.whichQuestion,
            testTime: row.testTime,
            itemname: row.extra2,
            testedId: sessionStorage.getItem('testedId')
          }
        })
      }
    },
    handleCurrentChange() {
      this.geListFn();
    },
    geListFn() {
      var query = {
        WAIMS_TOKEN: this.WAIMS_TOKEN,
        // testId: 10008,
        testedId: sessionStorage.getItem('testedId')
      }
      seckGetPsychReport(query).then(res => {
        if(res.code === 200) {
          this.tableData = res.data
        }
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.personList {
  height: calc(100vh - 200px);
  background: url(../assets/images/pbgc.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 100px 140px;
  .innerBox {
    height: calc(100% - 80px);
    padding: 40px 20px;
    background-color: #ffffff;
    box-shadow: 35px 35px 50px 0px 
      rgba(0, 0, 0, 0.3);
    border-radius: 10px;
  }
  .personinfo {
    padding: 10px 20px;
    // background: linear-gradient(to right, #bfbfbf, #efefef);
    border-radius: 20px;
    color: #333;
    background: #eee;
    font-weight: 700;
    
    span {
      margin-right: 20px;
    }
  }
  .topBox {
    margin: 0px 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .listBox {
    height: calc(100% - 100px);
  }
  .pageBox {
    margin-top: 50px;
    display: flex;
    justify-content: center;
  }
}
</style>
<style lang="scss">
.personList {
  .el-input {
    width: 200px;
    margin-right: 20px;
  }
  .el-divider--vertical {
    border-left: 0;
  }
}
</style>